<template>
  <view :style="themeColor">
    <view class="page">
      <view class="flex benben-position-layout flex flex-wrap align-center woyaozulin_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center justify-between flex-sub woyaozulin_fd0_0'>
          <view class='flex flex-wrap align-center woyaozulin_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
            data-url="1">
            <text class='fu-iconfont2  woyaozulin_fd0_0_c0_c0'>&#xE794;</text>
          </view>
          <view class='flex flex-wrap align-stretch justify-center'>
            <text class='woyaozulin_fd0_0_c1_c0'>我的租赁</text>
          </view>
          <view class='flex flex-wrap align-center justify-end woyaozulin_fd0_0_c0'>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---多商订单tabsflex布局开始-->
      <view class="flex align-stretch benben-flex-layout">
        <view>
          <benben-flex-tabs class-name='woyaozulin_benbenTabsfd1_0' v-model="type" ref="benben_tabsfd1_0"
            select-mark="benben_tabsfd1_0" key="benben_tabsfd1_0" :open-title-type='false' :open-sticky='true' :top='88'
            :is-show-content='false' :scrollspy='false' :tabs-info.sync="tabsInfofd1_0" @change="getTabsFunc()">

            <scroll-view @scroll="tabsInfofd1_0.scrollX = $event.detail.scrollLeft" id="benben_tabsfd1_0"
              class="benben-tabs" style="width:750rpx" :scroll-x="true" :scroll-left.sync="tabsInfofd1_0.moveX"
              scroll-with-animation="all .3s ease">
              <view class="benben-tabs-content" id="benben_tabsfd1_0-content">
                <view id="benben_tabsfd1_0-title" class="benben-tabs-title flex align-center flex ">
                  <view
                    :class="{ 'checkTitlefd1_0': type == '-1', 'flex flex-wrap align-center woyaozulin_titlefd1_0_c3': true }"
                    @tap="type = '-1'" :id="`benben_tabsfd1_0-title-item-${'-1'}`">

                    <text>{{$t('全部')}}</text>

                  </view>
                  <view
                    :class="{ 'checkTitlefd1_0': type == '35', 'flex flex-wrap align-center woyaozulin_titlefd1_0_c4': true }"
                    @tap="type = '35'" :id="`benben_tabsfd1_0-title-item-${'35'}`">

                    <text>租赁中</text>

                  </view>
                  <view
                    :class="{ 'checkTitlefd1_0': type == '36', 'flex flex-wrap align-center woyaozulin_titlefd1_0_c4': true }"
                    @tap="type = '36'" :id="`benben_tabsfd1_0-title-item-${'36'}`">

                    <text>待归还</text>

                  </view>
                  <view
                    :class="{ 'checkTitlefd1_0': type == '37', 'flex flex-wrap align-center woyaozulin_titlefd1_0_c4': true }"
                    @tap="type = '37'" :id="`benben_tabsfd1_0-title-item-${'37'}`">

                    <text>待退款</text>

                  </view>
                  <view
                    :class="{ 'checkTitlefd1_0': type == '40', 'flex flex-wrap align-center woyaozulin_titlefd1_0_c4': true }"
                    @tap="type = '40'" :id="`benben_tabsfd1_0-title-item-${'40'}`">

                    <text>已完成</text>

                  </view>
                </view>
                <view :style="{ left: tabsInfofd1_0.lineleft, maxWidth: tabsInfofd1_0.lineWidth ,}"
                  id="benben_tabsfd1_0-line" class="benben-tabs-line flex benben-flex-tabs-line woyaozulin_linefd1_0">
                </view>
              </view>
            </scroll-view>

          </benben-flex-tabs>

        </view>
      </view>

      <!---多商订单tabsflex布局结束-->
      <!---多商订单商品flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout woyaozulin_flex_2">
        <template v-for='(item,key0) in dataList'>
          <view class='flex flex-direction flex-wrap align-stretch woyaozulin_fd2_0' @tap.stop="handleJumpDiy"
            data-type="navigateTo"
            :data-url="`/pages/ddgl/zulindetail/zulindetail?order_id=${item.id}&order_sn=${item.id}&id=${item.id}`"
            :key='key0'>
            <view class='flex flex-wrap align-center justify-between woyaozulin_fd2_0_c0'>
              <view class='flex flex-wrap align-center'>
                <text class='woyaozulin_fd2_0_c0_c0_c1 text-666'>设备编号</text>
                <text class='text-333 margin-left-sm woyaozulin_fd2_0_c0_c0_c1'>{{item.comdFacCore}}</text>
              </view>
              <text class='woyaozulin_fd2_0_c0_c1' v-if="item.stateNum=='35'">租赁中</text><text
                class='woyaozulin_fd2_0_c0_c1_1' v-if="item.stateNum=='36'">{{$t('待归还')}}</text><text
                class='woyaozulin_fd2_0_c0_c1_1' v-if="item.stateNum=='37'">{{$t('待退款')}}</text><text
                class='woyaozulin_fd2_0_c0_c1_1' v-if="item.stateNum=='40'">{{$t('已完成')}}</text><text
                class='woyaozulin_fd2_0_c0_c1_1' v-if="item.stateNum=='42'">{{$t('已完成')}}</text>
            </view>
            <view class='flex align-stretch woyaozulin_fd2_0_c1'>
              <image class='woyaozulin_fd2_0_c1_c0' mode="aspectFill" :src='item.coverPic'></image>
              <view class='flex flex-direction flex-wrap align-stretch flex-sub woyaozulin_fd2_0_c1_c1'>
                <text class='woyaozulin_fd2_0_c1_c1_c0'>{{item.comdName}}</text>
                <text class='woyaozulin_fd2_0_c1_c1_c1'>{{item.comPropItemNames}}</text>
                <view class='flex flex-wrap align-center' v-if="item.leaCloseSecond">
                  <text>剩余时长：</text>
                  <!-- <text>{{item.leaCloseSecond}}</text> -->
                  <benben-countdown class='offerPay_fd1_1_c1' :show-day='true' :count-time="item.leaCloseSecond">
                    <template #default="{ d, h, i, s }">
                      <text class="offerPay_fd1_1_c0" style="color: #327FFB;">{{d}}</text>

                      <text class="offerPay_fd1_1_c0">天</text>

                      <text class='offerPay_fd1_1_c0' style="color: #327FFB;">{{h}}</text>

                      <text class='offerPay_fd1_1_c0'>:</text>

                      <text class='offerPay_fd1_1_c0' style="color: #327FFB;">{{i}}</text>

                      <text class='offerPay_fd1_1_c0'>:</text>

                      <text class='offerPay_fd1_1_c0' style="color: #327FFB;">{{s}}</text>

                      <text class='offerPay_fd1_1_c0'></text>
                    </template>
                  </benben-countdown>
                </view>
              </view>
            </view>


            <view class='flex align-center justify-between woyaozulin_fd2_0_c2'>
              <view class='woyaozulin_fd2_0_c2_c0' v-if="item.stateNum==35" @click.stop="chooseMorder(item)">
                更多
                <view class="cancel-box" v-if="item.isShow">
                  <view class="cancel-item" @tap.stop="handleJumpDiy" data-type="navigateTo"
                    :data-url="`/pages/ddgl/faultdispatch/faultdispatch?order_sn=${item.id}&comdFacCore=${item.comdFacCore}`">
                    故障报修
                  </view>
                  <view class="cancel-item" @tap.stop="handleJumpDiy" data-type="navigateTo"
                    :data-url="`/pages/ddgl/wantreturn/wantreturn?order_sn=${item.id}&type=${item.stateNum}`">
                    提前归还
                  </view>
                </view>
              </view>
              <view class='woyaozulin_fd2_0_c2_c0' v-else @click.stop="chooseMorder(item)">
                <!-- 更多
                <view @tap.stop="handleJumpDiy" data-type="navigateTo"
                  :data-url="`/pages/ddgl/faultdispatch/faultdispatch?order_sn=${item.id}&comdFacCore=${item.comdFacCore}`"
                  class="cancel-box" v-if="item.isShow">故障报修</view> -->
              </view>
              <view class="flex align-end align-center">
                <button class='woyaozulin_fd2_0_c2_c1' @tap.stop="handleJumpDiy" data-type="navigateTo"
                  :data-url="`/pages/sy/questionnaire/devicedetails?order_sn=${item.id}&comdFacCore=${item.comdFacCore}`">设备详情</button>
                <button class='woyaozulin_fd2_0_c2_c4' v-if="item.stateNum==35" @tap.stop="openpop(item)">续租</button>
                <button v-if="item.stateNum==35|| item.stateNum==36" class='woyaozulin_fd2_0_c2_c2'
                  @tap.stop="popopen(item)">买下</button>
                <button class='woyaozulin_fd2_0_c2_c3' v-if=" item.stateNum==36" @tap.stop="handleJumpDiy"
                  data-type="navigateTo"
                  :data-url="`/pages/ddgl/wantreturn/wantreturn?order_sn=${item.id}&type=${item.status}`">归还</button>

              </view>

            </view>
          </view>
        </template>
        <fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
          :listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
      </view>

      <!---多商订单商品flex布局结束-->
      <benben-popup v-model="popupShow1709706165794" :mask="true" :mask-close-able="false" mode='bottom'>
        <!---flex布局flex布局开始-->
        <view class="flex flex-direction align-stretch benben-flex-layout woyaozulin_flex_4">
          <view class='flex flex-wrap align-start'>
            <image class='woyaozulin_fd4_0_c0' mode="aspectFit" :src='popBox.coverPic'></image>
            <view class='flex flex-direction align-stretch flex-sub woyaozulin_fd4_0_c1'>
              <view class='flex align-center justify-between'>
                <view class='flex flex-wrap align-center'>
                  <image class='woyaozulin_fd4_0_c1_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"500.png"'></image>
                  <view class='flex align-center woyaozulin_fd4_0_c1_c0_c0_c1'>
                    <text class='woyaozulin_fd4_0_c1_c0_c0_c1_c0'>￥</text>
                    <text>{{popBox.rentMoeny}}</text>
                  </view>
                  <view class='flex flex-wrap align-center self-center justify-center woyaozulin_fd4_0_c1_c0_c0_c2'>
                    <text>押金¥{{popBox.cashMoeny}}</text>
                    <!-- <text class='woyaozulin_fd4_0_c1_c0_c0_c2_c1'></text> -->
                  </view>
                </view>
                <image @click.stop="popupShow1709706165794=false" class='woyaozulin_fd4_0_c1_c0_c1' mode="aspectFit"
                  :src='STATIC_URL+"131.png"'></image>
              </view>
              <view class='flex align-center woyaozulin_fd4_0_c1_c1'>
                <!-- <view class='flex align-center woyaozulin_fd4_0_c1_c1_c0'>
                  <text>库存 </text>
                  <text class='woyaozulin_fd4_0_c1_c1_c0_c1'>233</text>
                </view> -->
                <view class='flex align-center woyaozulin_fd4_0_c1_c1_c1'>
                  <text>已选：</text>
                  <text class='woyaozulin_fd4_0_c1_c1_c0_c1'>{{popBox.comPropItemNames}}</text>
                </view>
              </view>
            </view>
          </view>
          <view class='flex flex-direction align-stretch woyaozulin_fd4_1'>
            <text class='woyaozulin_fd4_1_c0'>租赁</text>
            <view class='flex flex-wrap align-center woyaozulin_fd4_1_c1'>
              <!--   <view class='flex align-center justify-center woyaozulin_fd4_1_c1_c0 active'
                @click.stop="chooseLease(item)" v-for="(item,index) in leaseItemVos" :key="index">
                {{item.propItemName}}
              </view> -->
              <view class='flex align-center justify-center woyaozulin_fd4_1_c1_c0' @click.stop="chooseLease(item)"
                :class="leaseItemId==item.id ? 'active' : ''" v-for="(item,index) in leaseItemVos" :key="index">
                {{item.propItemName}}
              </view>
            </view>
          </view>
          <view class='flex align-center justify-between woyaozulin_fd4_2'>
            <text class='woyaozulin_fd4_2_c0'>租赁数量</text>

            <benben-flex-number-box class-name='flex flex align-center' input-class="woyaozulin_numberBoxInputfd4_2_c1"
              :disabled="true" :min="1" :step="1" :opacity="0.3">
              <template #minus>
                <image class='woyaozulin_fd4_2_c1_c0' mode="aspectFit" :src='STATIC_URL+"537.png"'></image>
              </template>
              <template #plus>
                <image class='woyaozulin_fd4_2_c1_c0' mode="aspectFit" :src='STATIC_URL+"517.png"'></image>
              </template>

            </benben-flex-number-box>

          </view>
          <view class='flex flex-wrap align-center justify-between woyaozulin_fd4_3'>
            <text>租赁费用</text>
            <text>￥{{leaseItemPrice}}</text>
          </view>
          <view class='flex align-center justify-center woyaozulin_fd4_4' @click.stop="goPay">
            <view class='flex align-center justify-center woyaozulin_fd4_4_c0'>
              <text class='woyaozulin_fd4_4_c0_c0'>续费</text>
            </view>
          </view>
        </view>

        <!---flex布局flex布局结束-->

      </benben-popup>
      <!---清除本地缓存flex布局开始-->
      <view class="flex benben-flex-layout flex-wrap align-center">
      </view>

      <!---清除本地缓存flex布局结束-->
      <!---清除本地缓存flex布局开始-->
      <view class="flex benben-flex-layout flex-wrap align-center">
      </view>

      <!---清除本地缓存flex布局结束-->

      <benben-popup v-model="isgoBuy" :mask="true" :mask-close-able="false" mode='bottom'>
        <!---flex布局flex布局开始-->
        <view class="flex flex-direction align-stretch benben-flex-layout woyaozulin_flex_4">
          <view class='flex flex-wrap align-start'>
            <image class='woyaozulin_fd4_0_c0' mode="aspectFit" :src='popBox.coverPic'></image>
            <view class='flex flex-direction align-stretch flex-sub woyaozulin_fd4_0_c1'>
              <view class='flex align-center justify-between'>
                <view class='flex flex-wrap align-center'>

                  <text class="text-999 text-sm margin-right-sm">买下</text>
                  <view class='flex align-center woyaozulin_fd4_0_c1_c0_c0_c1'>
                    <text class='woyaozulin_fd4_0_c1_c0_c0_c1_c0'>￥</text>
                    <text>{{popBox.sumAmount}}</text>
                  </view>

                </view>
                <image @click.stop="isgoBuy=false" class='woyaozulin_fd4_0_c1_c0_c1' mode="aspectFit"
                  :src='STATIC_URL+"131.png"'></image>
              </view>
            </view>
          </view>
          <view class='flex flex-direction align-stretch woyaozulin_fd4_1' v-for="(item,index) in popBox.propVos"
            :key="index">
            <text class='woyaozulin_fd4_1_c0'>{{item.propName}}</text>
            <view class='flex flex-wrap align-center woyaozulin_fd4_1_c1'>
              <view class='flex align-center justify-center woyaozulin_fd4_1_c1_c0 active'
                v-for="(childe,key0) in item.itemVos" :key="key0">
                {{childe.propItemName}}
              </view>
            </view>
          </view>
          <!-- <view class='flex flex-direction align-stretch woyaozulin_fd4_1'>
            <text class='woyaozulin_fd4_1_c0'>尺寸</text>
            <view class='flex flex-wrap align-center woyaozulin_fd4_1_c1'>
              <view class='flex align-center justify-center woyaozulin_fd4_1_c1_c0 active'>
                {{popBox.propItemName}}
              </view>
            </view>
          </view> -->
          <view class='flex align-center justify-between woyaozulin_fd4_2'>
            <text class='woyaozulin_fd4_2_c0'>租赁数量</text>

            <benben-flex-number-box class-name='flex flex align-center' input-class="woyaozulin_numberBoxInputfd4_2_c1"
              :disabled="true" :min="1" :step="1" :opacity="0.3">
              <template #minus>
                <image class='woyaozulin_fd4_2_c1_c0' mode="aspectFit" :src='STATIC_URL+"537.png"'></image>
              </template>
              <template #plus>
                <image class='woyaozulin_fd4_2_c1_c0' mode="aspectFit" :src='STATIC_URL+"517.png"'></image>
              </template>

            </benben-flex-number-box>

          </view>

          <view class='flex align-center justify-center woyaozulin_fd4_4' @click.stop="goPayBuy">
            <view class='flex align-center justify-center woyaozulin_fd4_4_c0'>
              <text class='woyaozulin_fd4_4_c0_c0'>我要买下</text>
            </view>
          </view>
        </view>

        <!---flex布局flex布局结束-->

      </benben-popup>
    </view>
  </view>
</template>
<script>
  import pagingList from '@/common/mixin/paging_list.js';
  import {
    validate
  } from '@/common/utils/validate.js'

  export default {
    components: {},
    mixins: [pagingList],

    data() {
      return {
        "popupShow1709706165794": false,
        "tabsInfofd1_0": {
          lineleft: '',
          lineWidth: '',
          moveX: 0,
          scrollX: 0,
          PageScrollX: 0
        },
        "minixPagingListsApi": "",
        "pageingListApiMethod": "",
        "allowOnloadGetList": false,
        "dataList": [],
        "cancelId": "",
        "cancelType": [],
        "dataAfterList": [],
        "invoiceData": [],
        "invoice_id": "",
        "invoice_order_id": "",
        "return_id": "",
        "dltOrderId": "",
        "refundId": "",
        "type": "-1",
        popBox: '',
        leaseItemVos: [],
        leaseItemId: '',
        leaseItemName: '',
        leaseItemPrice: 0,
        isgoBuy: false,
        payId: '',
        isMore: false
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },

    },
    watch: {},
    onLoad(options) {
      let {
        type
      } = options
      if (type !== undefined) this.type = type
      this.getOrderListFunc()
    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {

    },
    onHide() {
      this.isgoBuy = false
      this.popupShow1709706165794 = false
    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      chooseMorder(item) {
        item.isShow = !item.isShow
      },
      chooseLease(item) {
        this.leaseItemId = item.id
        this.leaseItemName = item.monthNum
        this.leaseItemPrice = parseFloat(this.popBox.rentMoeny * this.leaseItemName).toFixed(2)
      },
      openpop(item) {
        this.popBox = item
        this.getDetail(item)
        console.log('popBox', this.popBox)
      },

      getDetail(item) {

        this.$api.dbGet(global.apiUrls.getCommodDetail, {
          id: item.comdIdk
        }).then(res => {
          if (res.data.code == 0) {
            this.leaseItemVos = res.data.data.leaseItemVos
            this.popupShow1709706165794 = true
          }
        })
      },
      // 买下
      popopen(item) {
        this.payId = item.id
        // 获取买下数据详情
        this.$api.dbGet(global.apiUrls.getBuyData, {
          id: item.id
        }).then(res => {
          if (res.data.code == 0) {
            this.popBox = res.data.data
            this.isgoBuy = true
          } else {
            this.$message.info(res.data.msg)
          }
        })
      },
      // 我要买下
      goPayBuy() {
        uni.navigateTo({
          url: `/pages/sy/offerPay/leaEarlyPay?order_sn=${this.popBox.id}&money=${this.popBox.sumAmount}&time=900&recType=22`
        })
      },
      goPay() {
        if (!this.leaseItemId) {
          this.$message.info('请选择租赁时长')
          return;
        }
        uni.navigateTo({
          url: `/pages/sy/offerPay/offerPay?order_sn=${this.popBox.id}&money=${this.leaseItemPrice}&time=900&recType=22`
        })
      },
      //订单-删除订单
      async deleteOrderFunc() {
        this.popupShow1708479067655 = false;
        //请求方法
        //数据验证

        let data6447c3b69f234 = await this.$api.dbGet(global.apiUrls.post6447c3b69f234, {
          order_id: this.dltOrderId
        });
        if (!data6447c3b69f234) return
        if (data6447c3b69f234.data.code != 1) {
          this.$message.info(data6447c3b69f234.data.msg);
          return
        }
        this.getOrderListFunc()
        uni.showToast({
          title: global.i18n.t('删除成功'),
          mask: true,
          icon: 'none',
          duration: 1500
        });
      },
      //订单-订单列表
      getOrderListFunc() {
        this.minixPagingListsApi = global.apiUrls.qryAppMeLeaOrderRec;
        this.pageingListApiMethod = 'get';
        this.allowOnloadGetList = false;
        this.pagingListPostDataContent = {
          stateNum: this.type
        }
        this.listData = [];
        this.dataList = this.listData;
        this.pagingListToggle();

      },
      //取消订单
      async cancelOrderFunc() {
        if (!validate(this.return_id, 'require')) {
          this.$message.info(global.i18n.t('请选择取消原因'));
          return false;
        }
        //请求方法
        //数据验证

        let data62cb8b8438141 = await this.$api.dbPost(global.apiUrls.post62cb8b8438141, {
          order_id: this.cancelId,
          return_id: this.return_id
        });
        if (!data62cb8b8438141) return
        if (data62cb8b8438141.data.code != 1) {
          this.$message.info(data62cb8b8438141.data.msg);
          return
        }



        this.popupShow1679903057541 = false;
        setTimeout(() => {
          uni.showToast({
            title: global.i18n.t('取消成功'),
            mask: true,
            icon: 'none',
            duration: 1500
          });
          this.getOrderListFunc()
        }, 300)
      },
      //获取取消订单id
      getCancelIDFunc(id) {
        this.return_id = '';
        this.cancelId = id;
        this.popupShow1679903057541 = true;
      },
      //订单-查询取消原因
      async queryCancelTypeFunc() {
        //请求方法
        //数据验证

        let datacancelType = await this.$api.get(global.apiUrls.post641ae6544d2d5, {
          type: '2',
          list_rows: '3'
        });

        if (datacancelType.data.code != 1) {
          this.$message.info(datacancelType.data.msg);
          return
        }
        let infocancelType = datacancelType.data;
        this.cancelType = infocancelType.data

      },
      //提醒发货
      async remindShipFunc(id) {
        //请求方法
        //数据验证

        let data62bec4f86725d = await this.$api.dbPost(global.apiUrls.post62bec4f86725d, {
          order_id: id
        });
        if (!data62bec4f86725d) return
        if (data62bec4f86725d.data.code != 1) {
          this.$message.info(data62bec4f86725d.data.msg);
          return
        }



        uni.showToast({
          title: global.i18n.t('提醒成功'),
          mask: true,
          icon: 'none',
          duration: 1500
        });
        this.getOrderListFunc()
      },
      //确认收货
      async confirmReceiptFunc(id) {
        //请求方法
        //数据验证

        let data64218bff49e61 = await this.$api.dbPost(global.apiUrls.post64218bff49e61, {
          order_id: id
        });
        if (!data64218bff49e61) return
        if (data64218bff49e61.data.code != 1) {
          this.$message.info(data64218bff49e61.data.msg);
          return
        }



        uni.showToast({
          title: global.i18n.t('收货成功'),
          mask: true,
          icon: 'none',
          duration: 1500
        });
        this.getOrderListFunc()
      },

      //切换tabs
      getTabsFunc() {
        this.getOrderListFunc()
      },


      //删除订单
      dltOrderFunc(id) {
        this.dltOrderId = id;
        this.popupShow1708479067655 = true;
      },
      //删除售后订单
      dltRefundOrderFunc(id) {
        this.refundId = id;
        this.popupShow1708479409711 = true;
      },
      pagingListPostData() {
        return this.pagingListPostDataContent
      },
    }
  };
</script>
<style lang="scss" scoped>
  .offerPay_fd1_1_c0 {
    font-size: 24rpx;
    color: #666666;
  }

  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: #F8F8F8;
    background-size: 100% auto;
  }

  .woyaozulin_flex_0 {
    background: #fff;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .woyaozulin_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 700;
    color: #333333;
    line-height: 50rpx;
  }

  .woyaozulin_fd0_0_c0_c0 {
    font-size: 36rpx;
    color: #333;
  }

  .woyaozulin_fd0_0_c0 {
    width: 120rpx;
  }

  .woyaozulin_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .woyaozulin_titlefd1_0_c4 {
    margin: 0rpx 52rpx 0rpx 24rpx;
  }

  .woyaozulin_titlefd1_0_c3 {
    margin: 0rpx 52rpx 0rpx 24rpx;
  }

  .woyaozulin_linefd1_0 {
    background: url(image-path('513.png')) no-repeat;
    width: 34rpx;
    height: 12rpx;
    top: 80rpx;
    background-size: 100% auto !important;
    border-radius: 80rpx 80rpx 80rpx 80rpx;
  }

  .checkTitlefd1_0 {
    font-weight: 700 !important;
    font-size: 32rpx !important;
    color: #333333 !important;
    background-color: rgba(255, 255, 255, 1) !important;
  }

  ::v-deep .woyaozulin_benbenTabsfd1_0 {
    background: #fff;
    width: 750rpx;
    height: 90rpx;
    white-space: nowrap;
    text-align: center;
    font-size: 28rpx;
    font-weight: 400;
    color: var(--benbenFontColor0);
  }

  .woyaozulin_flex_2 {
    padding: 24rpx 24rpx 0rpx 24rpx;
  }

  .woyaozulin_fd2_0_c2_c4 {
    background: var(--benbenbgColor7);
    border-radius: 50rpx 50rpx 50rpx 50rpx;
    font-size: 24rpx;
    color: #fff;
    width: 144rpx;
    height: 56rpx;
    line-height: 56rpx;
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .woyaozulin_fd2_0_c2_c3 {
    background: var(--benbenbgColor7);
    border-radius: 28rpx 28rpx 28rpx 28rpx;
    font-size: 24rpx;
    color: var(--benbenFontColor3);
    width: 144rpx;
    height: 56rpx;
    line-height: 56rpx;
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .woyaozulin_fd2_0_c2_c2 {
    background: var(--benbenbgColor5);
    border-radius: 28rpx 28rpx 28rpx 28rpx;
    font-size: 24rpx;
    color: #333;
    width: 144rpx;
    height: 56rpx;
    line-height: 56rpx;
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .woyaozulin_fd2_0_c2_c1 {
    background: var(--benbenbgColor5);
    border-radius: 28rpx 28rpx 28rpx 28rpx;
    font-size: 24rpx;
    color: #333;
    width: 144rpx;
    height: 56rpx;
    line-height: 56rpx;
  }

  .woyaozulin_fd2_0_c2_c0 {
    color: rgba(153, 153, 153, 1);
    font-size: 24rpx;
    position: relative;

    .cancel-box {
      color: #777777;
      font-size: 26rpx;
      width: 157rpx;
      // height: 80rpx;
      background: #FFFFFF;
      // line-height: 80rpx;
      box-shadow: 0px 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
      text-align: center;
      position: absolute;
      top: -200rpx;
      left: -50rpx;

      .cancel-item {
        line-height: 80rpx;
        height: 80rpx;
      }
    }
  }

  .woyaozulin_fd2_0_c2 {
    margin: 32rpx 0rpx 32rpx 0rpx;
  }

  .woyaozulin_fd2_0_c1_c1_c1 {
    line-height: 33rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
    margin: 8rpx 0rpx auto 0rpx;
  }

  .woyaozulin_fd2_0_c1_c1_c0 {
    line-height: 45rpx;
    font-size: 28rpx;
    font-weight: 600;
    color: #333333;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .woyaozulin_fd2_0_c1_c1 {
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .woyaozulin_fd2_0_c1_c0 {
    width: 200rpx;
    height: 200rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .woyaozulin_fd2_0_c1 {
    border-bottom: 1px solid #eee;
    margin: 0rpx 0rpx 32rpx 0rpx;
    padding: 0rpx 0rpx 24rpx 0rpx;
  }

  .woyaozulin_fd2_0_c0_c1_1 {
    line-height: 40rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #327FFB;
  }

  .woyaozulin_fd2_0_c0_c1 {
    line-height: 40rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: var(--benbenFontColor0);
  }

  .woyaozulin_fd2_0_c0_c0_c3_c0 {
    color: var(--benbenFontColor4);
    font-size: 22rpx;
  }

  .woyaozulin_fd2_0_c0_c0_c3 {
    background: rgba(50, 127, 251, 0.1);
    background-size: 100% auto;
  }

  .woyaozulin_fd2_0_c0_c0_c2 {
    font-size: 22rpx;
    margin: 0rpx 12rpx 0rpx 0rpx;
  }

  .woyaozulin_fd2_0_c0_c0_c1 {
    // color: var(--benbenFontColor0);
    // margin: 0rpx 12rpx 0rpx 12rpx;
  }

  .woyaozulin_fd2_0_c0_c0_c0 {
    width: 30rpx;
    height: 28rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .woyaozulin_fd2_0_c0 {
    padding: 32rpx 0rpx 32rpx 0rpx;
  }

  .woyaozulin_fd2_0 {
    background: #fff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    background-size: 100% auto !important;
    padding: 0rpx 24rpx 0rpx 24rpx;
    margin: 0rpx 0rpx 24rpx 0rpx;
  }

  .woyaozulin_flex_3 {
    padding: 24rpx 24rpx 0rpx 24rpx;
  }

  .woyaozulin_fd3_0_c2_c1 {
    background: var(--benbenbgColor5);
    border-radius: 28rpx 28rpx 28rpx 28rpx;
    font-size: 24rpx;
    color: #333;
    width: 160rpx;
    height: 56rpx;
    line-height: 56rpx;
  }

  .woyaozulin_fd3_0_c2_c0 {
    background: var(--benbenbgColor5);
    border-radius: 28rpx 28rpx 28rpx 28rpx;
    font-size: 24rpx;
    color: #333;
    width: 160rpx;
    height: 56rpx;
    line-height: 56rpx;
    margin: 0rpx 24rpx 0rpx 0rpx;
  }

  .woyaozulin_fd3_0_c2 {
    border-top: 1px solid #eee;
    margin: 0rpx 0rpx 32rpx 0rpx;
    padding: 24rpx 0rpx 0rpx 0rpx;
  }

  .woyaozulin_fd3_0_c1_c1_c2_c1_c0 {
    line-height: 33rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
  }

  .woyaozulin_price2_fd3_0_c1_c1_c2_c0_c1 {
    font-size: 22rpx;
  }

  .woyaozulin_price1_fd3_0_c1_c1_c2_c0_c1 {
    font-size: 32rpx;
  }

  .woyaozulin_fd3_0_c1_c1_c2_c0_c1 {
    color: var(--benbenFontColor0);
    font-weight: 700;
    line-height: 40rpx;
    font-size: 22rpx;
  }

  .woyaozulin_fd3_0_c1_c1_c2_c0_c0 {
    line-height: 40rpx;
    font-size: 22rpx;
    font-weight: 700;
    color: var(--benbenFontColor0);
  }

  .woyaozulin_fd3_0_c1_c1_c1 {
    line-height: 33rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
    margin: 8rpx 0rpx auto 0rpx;
  }

  .woyaozulin_fd3_0_c1_c1_c0 {
    line-height: 42rpx;
    font-size: 28rpx;
    font-weight: 600;
    color: #333333;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .woyaozulin_fd3_0_c1_c1 {
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .woyaozulin_fd3_0_c1_c0 {
    width: 200rpx;
    height: 200rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .woyaozulin_fd3_0_c1 {
    margin: 0rpx 0rpx 32rpx 0rpx;
  }

  .woyaozulin_fd3_0_c0_c3_c0_1 {
    line-height: 40rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: var(--benbenFontColor5);
  }

  .woyaozulin_fd3_0_c0_c3_c0 {
    line-height: 40rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: var(--benbenFontColor0);
  }

  .woyaozulin_fd3_0_c0_c2_1 {
    border: 1px solid rgba(47, 152, 254, 1);
    background: rgba(47, 152, 254, 0.06);
    color: rgba(47, 152, 254, 1);
    font-size: 22rpx;
    font-weight: 500;
    border-radius: 40rpx 40rpx 0rpx 40rpx;
    padding: 0rpx 10rpx 0rpx 10rpx;
    margin: 0rpx 10rpx 0rpx 0rpx;
    line-height: 32rpx;
    height: 32rpx;
  }

  .woyaozulin_fd3_0_c0_c2 {
    border: 1px solid var(--benbenbdColor8);
    background: rgba(47, 152, 254, 0.06);
    color: var(--benbenFontColor4);
    font-size: 22rpx;
    font-weight: 500;
    border-radius: 40rpx 40rpx 0rpx 40rpx;
    padding: 0rpx 10rpx 0rpx 10rpx;
    margin: 0rpx 10rpx 0rpx 0rpx;
    line-height: 32rpx;
    height: 32rpx;
  }

  .woyaozulin_fd3_0_c0_c1 {
    margin: 0rpx auto 0rpx 0rpx;
    color: var(--benbenFontColor2);
    font-size: 28rpx;
  }

  .woyaozulin_fd3_0_c0_c0 {
    font-size: 28rpx;
    color: var(--benbenFontColor2);
  }

  .woyaozulin_fd3_0_c0 {
    padding: 32rpx 0rpx 32rpx 0rpx;
  }

  .woyaozulin_fd3_0 {
    background: #fff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    background-size: 100% auto !important;
    padding: 0rpx 24rpx 0rpx 24rpx;
    margin: 0rpx 0rpx 24rpx 0rpx;
  }

  .woyaozulin_flex_4 {
    background: #fff;
    background-size: 100% auto !important;
    border-radius: 32rpx 32rpx 0rpx 0rpx;
    padding: 0rpx 032rpx 0rpx 32rpx;
    margin: 58rpx 0rpx 0rpx 0rpx;
  }

  .woyaozulin_fd4_4_c0_c0 {
    color: #FFFFFF;
    font-size: 32rpx;
    font-weight: 400;
    line-height: 45rpx;
  }

  .woyaozulin_fd4_4_c0 {
    background: var(--benbenbgColor7);
    width: 684rpx;
    height: 88rpx;
    background-size: 100% auto !important;
    border-radius: 44rpx;
  }

  .woyaozulin_fd4_4 {
    margin: 0rpx 0rpx 40rpx 0rpx;
  }

  .woyaozulin_fd4_3 {
    padding: 0rpx 0rpx 32rpx 0rpx;
  }

  .woyaozulin_fd4_2_c1_c0 {
    height: 48rpx;
    margin: 0rpx 4rpx 0rpx 4rpx;
    width: 48rpx;
  }

  ::v-deep .woyaozulin_numberBoxInputfd4_2_c1 {
    background: rgba(255, 255, 255, 0.2);
    width: 80rpx;
    height: 50rpx;
    text-align: center;
    color: #323232;
    font-size: 28rpx;
  }

  .woyaozulin_fd4_2_c0 {
    color: #333333;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 40rpx;
  }

  .woyaozulin_fd4_2 {
    margin: 32rpx 0rpx 39rpx 0rpx;
  }

  .woyaozulin_fd4_1_c1_c2 {
    background: rgba(246, 246, 246, 1);
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    width: 290rpx;
    height: 54rpx;
    margin: 0rpx 32rpx 32rpx 0rpx;
  }

  .woyaozulin_fd4_1_c1_c1_c0 {
    color: #333;
    font-size: 24rpx;
    font-weight: 700;
    line-height: 33rpx;
  }

  .woyaozulin_fd4_1_c1_c1 {
    background: rgba(246, 246, 246, 1);
    border-radius: 44rpx;
    width: 290rpx;
    height: 54rpx;
    margin: 0rpx 32rpx 32rpx 0rpx;
  }

  .woyaozulin_fd4_1_c1_c0_c0 {
    color: var(--benbenFontColor3);
    font-size: 24rpx;
    font-weight: 700;
    line-height: 33rpx;
  }

  .woyaozulin_fd4_1_c1_c0 {
    background: var(--benbenbgColor5);
    border-radius: 44rpx;
    width: 290rpx;
    height: 54rpx;
    margin: 0rpx 32rpx 32rpx 0rpx;
    color: #333;

    &.active {
      background: var(--benbenbgColor7);
      color: #FFF;
    }
  }

  .woyaozulin_fd4_1_c1 {
    border-bottom: 1px solid #eee;
  }

  .woyaozulin_fd4_1_c0 {
    color: #333333;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 40rpx;
    margin: 0rpx 0rpx 24rpx 0rpx;
  }

  .woyaozulin_fd4_1 {
    margin: 50rpx 0rpx 0rpx 0rpx;
  }

  .woyaozulin_fd4_0_c1_c1_c1 {
    color: #666666;
    font-size: 24rpx;
    line-height: 33rpx;
    font-weight: 400;
  }

  .woyaozulin_fd4_0_c1_c1_c0_c1 {
    margin: 0rpx 0rpx 0rpx 12rpx;
  }

  .woyaozulin_fd4_0_c1_c1_c0 {
    color: #666666;
    font-size: 24rpx;
    line-height: 33rpx;
    font-weight: 400;
    margin: 0rpx 40rpx 0rpx 0rpx;
  }

  .woyaozulin_fd4_0_c1_c1 {
    margin: 16rpx 0rpx 0rpx 0rpx;
  }

  .woyaozulin_fd4_0_c1_c0_c1 {
    width: 40rpx;
    height: 40rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .woyaozulin_fd4_0_c1_c0_c0_c2_c1 {
    margin: 0rpx 0rpx 0rpx 6rpx;
  }

  .woyaozulin_fd4_0_c1_c0_c0_c2 {
    font-size: 24rpx;
    margin: 0rpx 0rpx 0rpx 12rpx;
  }

  .woyaozulin_fd4_0_c1_c0_c0_c1_c0 {
    font-size: 30rpx;
  }

  .woyaozulin_fd4_0_c1_c0_c0_c1 {
    color: rgba(218, 55, 44, 1);
    font-size: 40rpx;
    line-height: 53rpx;
    font-weight: 700;
  }

  .woyaozulin_fd4_0_c1_c0_c0_c0 {
    width: 32rpx;
    height: 28rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 18rpx 0rpx 0rpx;
  }

  .woyaozulin_fd4_0_c1 {
    padding: 40rpx 0rpx 0rpx 0rpx;
  }

  .woyaozulin_fd4_0_c0 {
    width: 200rpx;
    height: 200rpx;
    margin: -58rpx 24rpx 0rpx 0rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }
</style>
